<template>
  <el-menu default-active="2" :collapse="store.state.MemberInfo.showExpand" router>
    <div class="lolo"><img class="logo" src="../assets/images/logo.png" alt=""></div>
    <template v-for="item in router.options.routes[2].children" :key="item.path">
      <el-sub-menu :index="item.path" v-if="item.children">
        <template #title>
          <!-- <el-icon color="#fff">
            <location />
          </el-icon> -->
          <!-- <span>{{ item.meta.icon }}</span> -->
          <span style="color:#fff;">{{ item.meta.title }}</span>
        </template>
        <el-menu-item-group v-for="sub in item.children" :key="sub.path">
          <el-menu-item :index="sub.path" style="color:#fff;">{{ sub.meta.title }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-menu-item v-else :index="item.path">
        <el-icon color="#fff" :size="18">
          <!-- <Setting /> -->
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
// console.log(router);

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.lolo {

  display: flex;
  align-items: center;
  justify-content: center;

  .logo {
    width: 50px;
    height: 50px;
    // margin-left: 25px;

  }
}


.el-menu {
  border-right: none;
}
</style>
